<template>
  <div v-if="show" class="modal-overlay" @click.self="$emit('close')">
    <div class="modal">
      <h3>学生详情</h3>
      <p><strong>编号：</strong>{{ student.id }}</p>
      <p><strong>姓名：</strong>{{ student.name }}</p>
      <p>
        <strong>性别：</strong>
        <span v-if="student.gender === '男'">👨 男</span>
        <span v-else-if="student.gender === '女'">👩 女</span>
        <span v-else>{{ student.gender }}</span>
      </p>
      <p><strong>年龄：</strong>{{ student.age }}</p>
      <p>
        <strong>照片：</strong><br />
        <img
          :src="student.photo"
          alt="学生照片"
          style="max-width: 200px; border: 1px solid #ccc;"
        />
      </p>
      <button @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  show: Boolean,
  student: {
    type: Object,
    default: () => ({})
  }
})

defineEmits(['close'])
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: white;
  padding: 20px;
  border-radius: 6px;
  min-width: 300px;
}
</style>
